<template>
    <h2>用户理财赎回明细</h2>
    <table>
        <thead>
            <tr style="background-color: :aqua;">
                <td>理财项目编号</td>
                <td>账户名称</td>
                <td>理财名称</td>
                <td>用户购买金额</td>
                <td>赎回金额</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.F_Id">
                <td>{{ item.F_Id }}</td>
                <td>{{ item.UL_Name }}</td>
                <td>{{ item.F_Name }}</td>
                <td>{{ item.UF_Money }}</td>
                <td>{{ item.UFR_Money }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { onMounted, ref } from 'vue'
import axios from 'axios';
import { useRoute } from 'vue-router';

//创建响应对象接受数据
const data = ref([{
    F_Id: 0,
    F_Name: '',
    UL_Name: '',
    UF_Money: 0,
    UFR_Money: 0
}])

//创建路由实例
const route = useRoute();

onMounted(() => {
    axios({
        method: 'get',
        url: "https://localhost:44305/api/Finans/GetUserReddemInfo",
        params: {
            Fid: route.params.Fid
        }
    })
        .then(function (res) {
            data.value = res.data;
        })
        .catch(function (error) {
            console.log(error);
        })

})

</script>